<template>
  <el-sub-menu v-if="item && item.children.length > 0" :index="'/'+item.path">
    <template #title>
      <i :class="iconObj[item.id]"></i>
      <span>{{item.authName}}</span>
    </template>
    <MenuItem v-for="subItem in item.children" :item="subItem" :key="subItem.id+''"></MenuItem>

  </el-sub-menu>
  <el-menu-item v-else-if="item" :index="'/'+item.path">
    <i :class="iconObj[item.id]"></i>
    <template #title>{{item.authName}}</template>
  </el-menu-item>
</template>

<script setup lang="ts">
import {useStore} from "@/store";
import {computed} from "vue";
const store = useStore()
const iconObj = computed(()=>{
  return store.getters.getIconObj
})
defineProps({item: Object})

</script>

<style lang="less" scoped>
.iconfont{
  margin-right: 10px;
}
</style>
